<template>
    <div class="home">
        <HomeTitle></HomeTitle>
        <div class="content">
            <ul class="nav">
                <li v-for="(item,index) in navList" 
                :key="index" 
                @click="getIndex(index)"  
                :style="{background:currentindex==index?'white':'#f4f4f4'}"
                >
                    <span :style="{color:currentindex==index?'red':'#333'}" >
                        {{item.cat_name}}
                    </span> 
                </li>
            </ul>
            <div class="content_right">
                <img src="../assets/$[LJ)(GTE2T(PV5DWP)~VNY.jpg" width="100%" />
                <div v-for="(item,index) in navList" 
                :key="index" 
                class="content_box" 
                :class="{tl:currentindex==index }"
                >
                    <h3>
                        {{item.children[0].cat_name}}
                    </h3>
                    <ul>
                        <li v-for="(it,index) in item.children[0].children" :key="index">
                                <img :src="it.cat_icon" width="100%" style="margin-bottom:15px;" />
                                <p>
                                    {{it.cat_name}}
                                </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HomeTitle from "../components/Home/HomeTitle.vue"
import {getCate} from "../api/nav"

export default {
    name: 'Home',
    components:{
       HomeTitle 
    },
    data() {
        return {
            navList:[],
            currentindex:0
        };
    },
    methods:{
        getIndex(index){
            this.currentindex=index
        }
    },
    created(){
        getCate().then(res=>{
           
            console.log(res);
            this.navList=res
        })
    }
};

</script>

<style lang="less" scoped>
    .content{
        width:100%;
        margin-top:20px;
        display:flex;
    }
    .nav{
        width:25%;
        li{
            width:100%;height:60px;line-height:60px;text-align:center;
            border:1px solid #eee;
            background:#f4f4f4;font-size:20px;padding:10px 0;
            font-weight:bold; color:#333;
        }
    }
    .content_right{
        width:75%;
        padding:0 15px;
    }

    .content_box{
        width:100%;
        margin-top:20px;
        display:none;
        h3{
            text-align:center;margin-bottom:20px;
        }
        ul{
            width:100%;
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            li{
                width:32%;
                text-align:center;margin:10px 0; display:flex; flex-direction:column;
                justify-content:flex-end;
            }
        }
    }
    .tl{
        display:block;
    }
</style>